<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()"/>
        </div>
        <div class="head-search" v-show="status==0">我的简历</div>
        <img src="../../assets/xg.png" alt="" class="xg" @click="xg" v-show="status==0"/>
      </div>
    </div>
    <div class="content">
      <div class="block">
        <div class="block-left">
          <img :src="ycUserResumeEntity.userPortrait" alt=""/>
        </div>
        <div class="block-div">
          <div class="name">{{ ycUserResumeEntity.userName }}</div>
          <div>
            <span>年龄：</span>
            {{ ycUserResumeEntity.age }}
          </div>
          <div>
            <span>电话：</span>
            <!-- 123****8900 -->
            {{ ycUserResumeEntity.tel }}
          </div>
          <div>
            <span>微信：</span>
            <!-- 123***789 -->
            {{ ycUserResumeEntity.wechat }}
          </div>
          <div>
            <span>邮箱：</span>
            <!-- 123***789@qq.com -->
            {{ ycUserResumeEntity.email }}
          </div>
        </div>
      </div>
      <!-- 求职意向 -->
      <div class="block" v-for="item in ycUserIntentionJobList">
        <div class="block-left">
          <span>求职意向</span>
          <div>{{ item.positionName }}</div>
        </div>
        <div class="block-div">
          <div>
            <span>工作城市：</span>
            <!-- 大连市 -->
            {{ item.cityName }}
          </div>
          <div>
            <span>期望薪资：</span>
            <!-- 7-9k -->
            {{ item.expectedSalaryName }}
          </div>
          <div>
            <span>求职状态：</span>
            <!-- 离职-暂不考虑 -->
            {{ item.jobStatusName }}
          </div>
          <div>
            <span>工作年限：</span>
            <!-- 1-3年 -->
            {{ item.workYearName }}
          </div>
        </div>
      </div>
      <!-- 工作经历 -->
      <!-- <div class="blocks" v-for="item in ycUserExperienceList"> -->
      <div class="blocks" v-if="ycUserExperienceList" v-for="(item,index) in ycUserExperienceList">
        <p>工作经历</p>
        <div class="blocks-div">{{ item.companyName }}</div>
        <div class="blocks-div">
          {{ item.jobName }}&nbsp;·&nbsp;<span>{{
            item.entryTime
          }}至{{ item.departureTime }}</span>
        </div>
        <div class="blocks-div1">
          <div class="blocks-title">内容：</div>
          <div class="blocks-test">{{ item.description }}</div>
        </div>
      </div>
      <!-- 教育经历 --><!-- 有数据赋值一下  -->
      <div class="blocks" v-if="ycUserEducationList"
           v-for="(item,index) in ycUserEducationList">
        <p>教育经历</p>
        <div class="blocks-div">{{ item.school }}</div>
        <div class="blocks-div">
          {{ item.professional }}&nbsp;·&nbsp;<span>{{
            item.admissionTime
          }}至{{ item.graduationTime }}</span>
        </div>
        <div class="blocks-div1">
          <div class="blocks-title">内容：</div>
          <div class="blocks-test">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="top">
      <div class="sanjiao"></div>
      <div class="pop-div" @click="go('/usersInformation')">我的信息</div>
      <div class="pop-div" @click="go('/job')">求职意向</div>
      <div class="pop-div" @click="goWork()">工作经历</div>
      <div class="pop-div" @click="goEducation()">教育经历</div>
    </mt-popup>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  inject: ['reload'],
  name: 'usersResume',
  components: {},
  created () {
    this.getUserId()
    this.init()
  },
  mounted () {

  },
  // data() 为变量赋值等
  data () {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      popupVisible: false,
      userId: '',
      ycUserResumeEntity: [],
      ycUserIntentionJobList: [],
      ycUserExperienceList: [],
      ycUserEducationList: []
    }
  },
  // methods 编写js函数
  methods: {
    init () {
      this.$http({
        method: 'get',
        params: {
          userId: this.userId
        },
        url: 'api/userResume/personResume'
      }).then(({data}) => {
        console.log(data)
        // 简历基本信息
        this.ycUserResumeEntity = data.userResume[0]
        this.ycUserResumeEntity.userPortrait = Vue.prototype.AppURL + '/file/' + data.userResume[0].resumePortrait
        // 工作经历
        this.ycUserExperienceList = data.userExperience
        // 教育经历
        this.ycUserEducationList = data.userEducation
        // 求职意向信息
        this.ycUserIntentionJobList = data.ycUserIntentionJobList
      })
    },
    getUserId () {
      if (this.status == 0) {
        this.userId = localStorage.getItem('userId')
      } else if (this.status == 1) {
        this.userId = this.$router.currentRoute.params.userId
      }
    },
    back () {
      // this.$router.go(-1)
      this.$router.push({name: 'usersMy'})
    },
    go (r) {
      this.$router.push(r)
    },
    goWork () {
      this.$router.push({path: '/work', query: {resumeId: this.userId}})
    },
    goEducation () {
      this.$router.push({path: '/education', query: {resumeId: this.userId}})
    },
    xg () {
      this.popupVisible = !this.popupVisible
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}

.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.back {
  width: 14px;
  height: 14px;
}

.head div img {
  width: 20px;
  height: 20px;
}

.xg {
  width: 20px;
  height: 20px;
}

.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #3e63a8;
}

.clear {
  width: 100%;
  height: 30px;
}

.block {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}

.block img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.block-div {
  flex: 1;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  padding-left: 20px;
}

.block-left {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 14px;
  width: 100px;
}

.block-left div {
  margin-top: 10px;
  color: #3e63a8;
}

.block-div div {
  font-size: 12px;
  padding: 3px 0;
}

.name {
  font-size: 16px !important;
  font-weight: 900;
  padding-top: 10px;
}

.blocks {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
}

.blocks p {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  text-align: center;
}

.blocks .blocks-div {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.blocks-div1 {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  display: flex;
}

.blocks-title {
  width: 50px;
}

.blocks span {
  font-size: 12px;
  color: #757575;
}

.blocks-test {
  flex: 1;
}

.mint-popup {
  width: 50%;
  height: 150px;
  background: #fff;
  top: 40px;
  left: 73%;
  overflow: visible;
  border-radius: 10px;
}

.sanjiao {
  width: 10px;
  height: 10px;
  background-color: #fff;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: absolute;
  top: -5px;
  right: 10px;
}

.pop-div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
  color: #333;
  height: 25%;
  box-sizing: border-box;
  font-size: 14px;
}

.pop-div:last-child {
  border: 0;
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 20px;
  align-items: center;
}

.btm-left {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 12px;
}

.btm-left img {
  width: 20px;
}

.btm-right {
  display: flex;
}

.btm-right div {
  background: #3e63a8;
  color: #fff;
  margin-left: 10px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
}
</style>
